<!--
 * @Description: 
 * @Date: 2020-12-18 10:34:56
 * @LastEditors: lother
 * @LastEditTime: 2021-01-07 16:54:50
 * @FilePath: \AccountOpening-H5\src\components\page\k-checkbox.vue
-->
<template>
    <van-field name="checkbox" :label="list['title_'+langSuff]" :rules="rulesList" class="noBorder">
        <template #input>
            <van-checkbox-group v-model="checkbox">
                <van-checkbox v-for="(item) in columns" :key="item.value" :name="item.value" >
                    <div v-html="$backTitle(item['title_'+langSuff])"></div>
                    <!-- <back-title :title="item['title_'+langSuff]" /> -->
                    <template #icon="props">
                        <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                    </template>
                </van-checkbox>
            </van-checkbox-group>
        </template>
        </van-field>
</template>
<script>
export default {
    name:"k-checkbox",
    props:{
        val:{
            type:[String,Number,Array],
            default:()=>[]
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    computed:{
        langSuff(){
            return this.$store.state.langSuff
        },
        rulesList(){
            var arr=[]
            if(this.list?.is_require || this.list.is_require == 1){
                arr.push({ required: true, message: this.$t('login.index.5638rr393s40'),trigger :"onChange" })
            }
            var rules  = this.list?.rule ?? [];
            for (let index = 0; index < rules.length; index++) {
                const item = rules[index];
                if(item.rule!==''){
                    arr.push({pattern:this.evalreg(item.rule) , message : item['error_tip_'+this.langSuff]})
                }
            }
            return arr
        },
        columns(){
            var list  = this.list?.options || [];
            return list
        }
    },
    data() {
        return {
            checkbox: [],
            activeIcon:  require('@/assets/img/icon_gx.png'),
            inactiveIcon: require('@/assets/img/icon_bgx.png'),
        }
    },
    created(){
        if(typeof this.val =='string'){
            var array = this.val.split(",")
        }else{
            var array = this.val
        }
        var list  =  array.filter(item => item)
        this.checkbox =(list ?? [])
        // this.checkbox = this.val ?? []
    },
    methods:{
        // radioItem(e){
        //     if(e == this.checkbox){
        //         console.log('2')
        //         this.checkbox=''
        //     }
        // }
    },
    watch:{
        val(val,old){
            console.log(typeof val)
            if(typeof val =='string'){
                if(val==''){
                    var array = []
                }else{
                    var array = val.split(",")
                }
            }else{
                var array = val
            }
            this.checkbox =(array ?? [])
        },
        checkbox(val,old){
            var list  =  val.filter(item => item)
            // if(JSON.stringify(list)=="[]"){
            //     this.$emit('update:val','')
            // }else{
            //     }
                this.$emit('update:val',list.toString())
        }
    }
    
}
</script>
<style lang="less" scoped>
    .van-cell{
        padding :0;
        padding-top: 0.15rem;
        display: block;
        @{deep}.van-field__label{
            width: 100%;
            font-size: 0.5rem;
            color: @sizeColor;
            line-height: 0.5rem;
            padding: 0.5rem 0 0.2rem;
            font-weight: 600;
        }
        .van-checkbox{
            align-items:flex-start;
            padding:0.1rem 0;
            @{deep}.van-checkbox__icon{
                max-width: 0.28rem;
                display: flex;
                align-items: center;
               img{
                   width: 100%;
               }
            }
        }
    }
</style>